<template>
  <div>
    <a-modal title="设置报关信息" :visible="visible" @before-open="open" @cancel="handleCancel" :align-center="false" title-align="start" width="1200px" :mask-closable="false">
      <div class="con">
        <div class="table-title">
          <div class="title-item" style="width: 60px">图片</div>
          <div class="title-item" style="width: 130px">MSKU/ASIN</div>
          <div class="title-item" style="width: 130px">SKU/类目</div>
          <div class="title-item required" style="width: 130px">中文名</div>
          <div class="title-item required" style="width: 130px">英文名</div>
          <div class="title-item required" style="width: 130px">币种</div>
          <div class="title-item required" style="width: 130px">报关金额</div>
          <div class="title-item required" style="width: 130px">报关数量</div>
          <div class="title-item required" style="width: 130px">重量(g)</div>
          <div class="title-item required" style="width: 130px">海关编号</div>
        </div>
        <a-scrollbar style="max-height: 600px; overflow: auto">
          <div class="table-body-con">
            <div class="item" v-for="item of tableList" :key="item.id">
              <div v-for="packageItem of item.packageList">
                <div class="top">
                  <div class="mr10">
                    <span>平台订单号：</span>
                    <span>{{ item.platformOrderNumber }}</span>
                  </div>
                  <div class="mr10">
                    <span>包裹号：</span>
                    <span>{{ packageItem.packageNumber }}</span>
                  </div>
                  <div>
                    <span>国家：</span>
                    <span>{{ $extract(item, 'address.country') }}{{ $extract(item, 'address.countryCode') ? `(${$extract(item, 'address.countryCode')})` : '' }}</span>
                  </div>
                </div>
                <div class="bottom" :key="productItem.id" v-for="(productItem, index) of packageItem.packageItemList">
                  <div class="title-item" style="width: 60px; padding-top: 5px">
                    <ImgPopover :src="getImage(productItem)">
                      <template #con>
                        <img width="40" height="40" :src="getImage(productItem)" />
                      </template>
                    </ImgPopover>
                  </div>
                  <div class="title-item" style="width: 130px; padding-top: 0">
                    <TextLimit position="top" :rows="1">{{ productItem.msku }}</TextLimit>
                    <TextLimit position="top" :rows="1">{{ productItem.asin }}</TextLimit>
                  </div>
                  <div class="title-item" style="width: 130px; padding-top: 0">
                    <TextLimit position="top" :rows="1">{{ productItem.productSku }}</TextLimit>
                    <TextLimit position="top" :rows="1">{{ productItem.productCategoryName }}</TextLimit>
                  </div>
                  <div class="title-item" style="width: 130px">
                    <a-input v-model="tariffInfoValueList.find((e:any) => e.itemOnlyId == `${productItem.orderPackageId}_${productItem.orderItemId}`).name" class="fl" :style="{ width: '90px' }" />
                    <icon-arrow-fall @click="matchSetValue(productItem.orderPackageId, productItem.orderItemId, 'name')" v-if="index == 0 && packageItem.packageItemList[1]" class="arrow-icon fl" />
                  </div>
                  <div class="title-item" style="width: 130px">
                    <a-input v-model="tariffInfoValueList.find((e:any) => e.itemOnlyId == `${productItem.orderPackageId}_${productItem.orderItemId}`).nameEn" class="fl" :style="{ width: '90px' }" />
                    <icon-arrow-fall @click="matchSetValue(productItem.orderPackageId, productItem.orderItemId, 'nameEn')" v-if="index == 0 && packageItem.packageItemList[1]" class="arrow-icon fl" />
                  </div>
                  <div class="title-item" style="width: 130px">
                    <a-select v-model="tariffInfoValueList.find((e:any) => e.itemOnlyId == `${productItem.orderPackageId}_${productItem.orderItemId}`).currency" placeholder="请选择" class="fl" :style="{ width: '90px' }" allow-search>
                      <a-option v-for="item of currencyList" :value="item" :label="item"></a-option>
                    </a-select>
                    <icon-arrow-fall @click="matchSetValue(productItem.orderPackageId, productItem.orderItemId, 'currency')" v-if="index == 0 && packageItem.packageItemList[1]" class="arrow-icon fl" />
                  </div>
                  <div class="title-item" style="width: 130px">
                    <a-input-number v-model="tariffInfoValueList.find((e:any) => e.itemOnlyId == `${productItem.orderPackageId}_${productItem.orderItemId}`).amount" class="fl" hide-button :style="{ width: '90px' }" />
                    <icon-arrow-fall @click="matchSetValue(productItem.orderPackageId, productItem.orderItemId, 'amount')" v-if="index == 0 && packageItem.packageItemList[1]" class="arrow-icon fl" />
                  </div>
                  <div class="title-item" style="width: 130px">
                    <a-input-number v-model="tariffInfoValueList.find((e:any) => e.itemOnlyId == `${productItem.orderPackageId}_${productItem.orderItemId}`).qtyQuantity" class="fl" hide-button :style="{ width: '90px' }" />
                    <icon-arrow-fall @click="matchSetValue(productItem.orderPackageId, productItem.orderItemId, 'qtyQuantity')" v-if="index == 0 && packageItem.packageItemList[1]" class="arrow-icon fl" />
                  </div>
                  <div class="title-item" style="width: 130px">
                    <a-input-number v-model="tariffInfoValueList.find((e:any) => e.itemOnlyId == `${productItem.orderPackageId}_${productItem.orderItemId}`).weight" class="fl" hide-button :style="{ width: '90px' }" />
                    <icon-arrow-fall @click="matchSetValue(productItem.orderPackageId, productItem.orderItemId, 'weight')" v-if="index == 0 && packageItem.packageItemList[1]" class="arrow-icon fl" />
                  </div>
                  <div class="title-item" style="width: 130px">
                    <a-input class="fl" v-model="tariffInfoValueList.find((e:any) => e.itemOnlyId == `${productItem.orderPackageId}_${productItem.orderItemId}`).customsCode" :style="{ width: '80px' }" />
                    <icon-arrow-fall @click="matchSetValue(productItem.orderPackageId, productItem.orderItemId, 'customsCode')" v-if="index == 0 && packageItem.packageItemList[1]" class="arrow-icon fl" />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </a-scrollbar>
      </div>

      <template #footer>
        <a-button class="gray-outline" @click="handleCancel">取消</a-button>
        <a-button type="primary" :loading="loading" @click="handleOk">保存</a-button>
      </template>
    </a-modal>
  </div>
</template>

<script lang="ts">
  import { defineComponent, ref, reactive, toRefs, computed } from 'vue'
  import { Message } from '@arco-design/web-vue'
  import { currencySymbol } from '@/utils/globalData'
  import { saveOrUpdateItemDeclaration } from '@/api/order'
  import _ from 'lodash-es'
  export default defineComponent({
    props: ['selectRow'],
    setup(props: any, { emit }) {
      let visible = ref(false)
      const data: any = reactive({
        currencyList: [],
        loading: false,
        tableList: [],
        tariffInfoValueList: [],
      })

      const open = () => {
        for (const key in currencySymbol) {
          data.currencyList.push(key)
        }
        data.tableList = _.cloneDeep(props.selectRow)
        createValueList()
      }

      const createValueList = () => {
        data.tariffInfoValueList = []
        let productList: any = []
        data.tableList.forEach((e: any) => {
          e.packageList.forEach((el: any) => {
            productList = [...productList, ...el.packageItemList]
          })
        })
        productList.forEach((e: any) => {
          let obj: any = {
            amount: '',
            currency: '',
            customsCode: '',
            name: '',
            nameEn: '',
            orderItemId: e.orderItemId,
            qtyQuantity: '',
            weight: '',
            itemOnlyId: '',
          }

          if (e.declaration && e.declaration.name) {
            obj = e.declaration
            obj.orderItemId = e.orderItemId
          }

          obj.orderPackageId = e.orderPackageId
          obj.itemOnlyId = `${e.orderPackageId}_${e.orderItemId}`
          data.tariffInfoValueList.push(obj)
        })

        console.log(data.tariffInfoValueList)
      }

      const handleOk = async () => {
        data.loading = true
        try {
          const res: any = await saveOrUpdateItemDeclaration(data.tariffInfoValueList)
          if (res.code == 'SUCCESS') {
            Message.success('设置报关信息成功')
            visible.value = false
            emit('save')
          }
          data.loading = false
        } catch (error) {
          data.loading = false
        }
      }
      const handleCancel = () => {
        data.loading = false
        visible.value = false
      }

      const getImage = (item: any) => {
        console.log(item, '2222')

        if (item.isCustom) {
          let arr = item.customPics ? item.customPics.split(',') : []
          return arr[0]
        } else {
          return item.productPic
        }
      }

      const matchSetValue = (packageId: string, paackageItemId: string, type: string) => {
        let value = data.tariffInfoValueList.find((e: any) => e.orderItemId == paackageItemId)[type]
        data.tariffInfoValueList.map((e: any) => {
          if (e.orderPackageId == packageId) e[type] = value
          return e
        })
      }

      return {
        ...(toRefs(data) as any),
        visible,
        open,
        handleOk,
        handleCancel,
        getImage,
        matchSetValue,
      }
    },
  })
</script>

<style lang="less" scoped>
  .arrow-icon {
    font-size: 24px;
    margin-top: 3px;
  }

  .con {
    // height: 600px;
    border: 1px solid #e5e6eb;
    .table-title {
      height: 40px;
      line-height: 40px;
      background-color: #f2f3f5;
      font-size: 12px;
      display: flex;
      padding-left: 10px;
      .title-item {
        border-right: 1px solid #e5e6eb;
        border-bottom: 1px solid #e5e6eb;
        padding-left: 5px;
        &:last-child {
          border-right: none;
        }
      }

      .required {
        &::before {
          display: inline-block;
          content: '*';
          color: red;
          font-size: 18px;
        }
      }
    }

    .table-body-con {
      .item {
        .top {
          display: flex;
          height: 40px;
          line-height: 40px;
          background-color: #f7f8fa;
        }

        .bottom {
          display: flex;
          .title-item {
            height: 56px;
            padding-top: 13px;
            // line-height: 56px;
            border-right: 1px solid #e5e6eb;
            border-top: 1px solid #e5e6eb;
            padding-left: 5px;
            &:last-child {
              border-right: none;
            }
          }
        }
      }
    }
  }
</style>
